<!-- 商品信息：满减送等营销活动的弹窗 -->
<template>
  <view :class="['mote', { unfold: fittingRoom.visable }]">
    <view class="item" @click="expansion">
      <view class="item-text">模特</view>
      <image
        :src="fittingRoom.currentModel.thumbnailFileUrl"
        class="item-image"
        mode="aspectFill"
      ></image>
    </view>
    <view class="item">
      <image class="shangchuan" mode="heightFix" src="/static/shangchuan.png"></image>
      <uni-file-picker
        :auto-upload="false"
        :del-icon="false"
        :disable-preview="true"
        :image-styles="imageStyle"
        :sizeType="sizeType"
        class="upload"
        limit="1"
        mode="grid"
        @select="selectPic"
        >选择
      </uni-file-picker>
    </view>
    <view
      v-for="item of fittingRoom.modelList.slice(0, 4)"
      class="item"
      @click="switchModels(item)"
    >
      <view class="item-text"></view>
      <image :src="item.thumbnailFileUrl" class="item-image" mode="aspectFill"></image>
    </view>
  </view>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import sheep from '../../../sheep';
  import FittingRoomApi from '../../../sheep/api/fittingRoom'; // 隐藏
  const sizeType = ['original'];
  const imageStyle = {
    width: 200,
    height: 50,
  };
  const fittingRoom = sheep.$store('fittingRoom');
  console.log(fittingRoom.currentModel);

  function selectPic(...data) {
    FittingRoomApi.uploadModel(data[0].tempFiles[0].path, { sex: fittingRoom.sex }).then(() =>
      fittingRoom.getModelList(),
    );
  }

  function switchModels(item) {
    fittingRoom.switchModels(item);
    console.log('🚀 ~  ~ fittingRoom: ', item);
  }

  console.log('🚀 ~  🐶9 ~ fittingRoom: ', fittingRoom);

  function expansion(e) {
    fittingRoom.setVisable();
  }
</script>
<style lang="scss" scoped>
  .mote {
    position: absolute;
    top: 50rpx;
    left: 20rpx;
    overflow: hidden;
    height: 76rpx;
    transition: height 0.3s ease-in-out;
    z-index: 200;
  }
  .unfold {
    height: 700rpx;
  }

  .item {
    width: 86rpx;
    height: 76rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
    position: relative;
  }

  .item-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    //font-family: Molengo;
    font-size: 20rpx;
    font-style: normal;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 76rpx;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
  }

  .shangchuan {
    width: 86rpx;
    height: 76rpx;
  }

  .upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .item-image {
    width: 100%;
    height: 100%;
  }
</style>
